<!DOCTYPE html>
<html>
<head>
    <title>爱薇</title>
    #parse("include/head.html")
    <link href="$request.contextPath/res/plugin/swiper/css/swiper.min.css" rel="stylesheet">
</head>

<body>
  #parse("include/nav.html")
  <div class="banner">
      <div class="banner-images">
          <div class="swiper-c1 swiper-container">
              <div class="swiper-wrapper">
                  #foreach ($item in ${topBanner})
                  <div class="swiper-slide"><img onclick="load('$item.bannerTarget');" class="img-responsive" src="$item.bannerImg"></div>
                  #end
              </div>
              <div class="swiper-p1 swiper-pagination swiper-pagination-white"></div>
          </div>
      </div>
  </div>
<!--  <div class="banner"><img src="images/banner.jpg"></div>-->
  <div class="container clear">
  	 <!--精选项目-->
     <div class="box-m">
        <div class="index-title"><h2>精选项目</h2> <a href="$request.contextPath/project">查看全部 <font>&gt;</font></a></div>
        <div class="box-t-list">
            #foreach ($item in ${indexProject})
            <dl onclick="load('$request.contextPath/project/$item.projectId');">
                <dt><img src="$item.projectImg" /></dt>
                <dd>
                    <h2>$!item.projectName</h2>
                    <h3>$!item.projectDesc</h3>
                    <h4>$date.format('yyyy-MM-dd HH:mm', $!item.projectBegintime)</h4>
                </dd>
                <div class="see">
                    <a href="#"><i class="ico visit"></i>$item.projectViewcnt</a>
                    <a href="#"><i class="ico favor"></i>$item.projectLikecnt</a>
                </div>
            </dl>
            #end
        </div>
     </div>
     <!--精选项目 end-->
     <div class="box-m">
         <!--<img src="images/banner-s.jpg" />-->
         <div class="ad-images">
             <div class="swiper-c2">
                 <div class="swiper-wrapper">
                     #foreach ($item in ${adBanner})

                     <div class="swiper-slide"><img onclick="load('$item.bannerTarget');" class="ad-images img-responsive" src="$item.bannerImg"></div>
                     #end
                 </div>
                 <div class="swiper-p2 swiper-pagination swiper-pagination-white"></div>
             </div>
         </div>
     </div>
     
     <!--精选主播-->
     <div class="box-m index-anchor">
       <div class="index-title"><h2>精选主播</h2> <a href="$request.contextPath/user">查看全部 <font>&gt;</font></a></div>
       <div class="index-anchor-list">
           #foreach ($item in ${indexBobo})
           <dl onclick="load('$request.contextPath/user/$item.uid')">
            <dt><img src="$item.avatar" /></dt>
            <dd>
              <h2>$!item.nickname</h2>
              <span><i class="ico popular"></i> $!item.followerCnt</span>
            </dd>
          </dl>
           #end
      </div>
     </div>
     <!--精选主播 end-->
     <!--最热直播/最新直播-->
     <div class="box-m hot-anchor">
       <div class="index-title"><h2><a id="hot" href="javascript:void(0)" onclick="showUsers('hot');" class="on">最热直播</a> / <a id="new" href="#javascript:void(0)" onclick="showUsers('new');">最新直播</a></h2></div>
       <div id="RecBoboContainer" class="clear"></div>
     </div>
     <!--最热直播/最新直播 end-->
  </div>

  #parse("include/footer.html")
  #parse("include/libs.html")
  <script src="$request.contextPath/res/plugin/swiper/js/swiper.jquery.min.js"></script>
  <script>

      $(function () {
          var swiper = new Swiper('.swiper-c1', {
              pagination: '.swiper-p1',
              paginationClickable: true,
              nextButton: '.swiper-button-next',
              prevButton: '.swiper-button-prev',
              autoplay: 2500,
              onTouchMove: function (swiper, e) {
              }
          });

          var swiper2 = new Swiper('.swiper-c2', {
              pagination: '.swiper-p2',
              paginationClickable: true,
              nextButton: '.swiper-button-next',
              prevButton: '.swiper-button-prev',
              autoplay: 2500,
              onTouchMove: function (swiper2, e) {
              }
          });
          updateNav("#indexnav");
          showUsers('hot');
      });

      function showUsers(type) {
          if (type == 'hot') {
              $('#hot').addClass("on");
              $('#new').removeClass("on");
              getUsers(basePath+"/user/getHotUsers/","#RecBoboContainer");
          } else {
              $('#new').addClass("on");
              $('#hot').removeClass("on");
              getUsers(basePath+"/user/getNewestUsers/","#RecBoboContainer");
          }
      }

      function getUsers(url,ele) {
          var brands;
          $.ajax({
              url: url,
              type: "POST",
              dataType: 'json',
              data: {
                  "size": 5,
              },
              success: function (data) {
                  var str = "";
                  for (var i in data) {
                      var kys = data[i];
                      str += "<dl onclick=\" load('"+basePath+"/user/" + kys['uid'] + "')\">"
                      str += "<dt> <img src=\"" + kys['avatar'] + "\"></dt>";
                      str += "<dd>"
                      str += "<h2>" + kys['nickname'] + "</h2>";
                      str += "<h3> <i class=\"ico hot\"></i>&nbsp" + kys['followerCnt'] +"</h3>";
                      str += "</dd></dl>";
                  }
                  $(ele).html(str);
              },
              error: function (data) {
              }
          });
      }
  </script>

</body>
</html>
